<template>
	<view style="height: 100%;">
		<!-- <view class="wallet-add">
			<view style="background-color: #2979FF; padding: 20px; border-radius: 10px; display: flex;">
				<image src="../../static/default_avatar.png" style="border-radius: 100px; width: 50px; height: 50px;"></image>
				<view style="color: #FFFFFF; margin: 10px 0 0 20px;">师傅</view>
				<switch style="margin-left: auto;" color="#18BC37">休息</switch>
			</view>
		</view> -->
		
		<view style="margin: 15px 10px; padisplay: flex; background-color: #FFFFFF; padding: 10px; border-radius: 10px; font-size: 13px;">
			<view style="display: flex;">
				<view style="padding-top: 7px;">可提现工资￥{{balance}}</view>
				<view style="margin-left: auto;">
					<!-- <button size="mini" style="background-color: red; color: #FFFFFF; border-radius: 30px; font-size: 8px;">提现到余额</button> -->
					<button @click="withdraw()" size="mini" style="background-color: red; color: #FFFFFF; border-radius: 30px; font-size: 8px; margin-left: 5px;">提现到银行卡</button>
				</view>
				
			</view>
		</view>
		
		
		<view class="block-title" style="display: flex;padding: 10px 0;">
			<view @click="selectLabel(item)" :class="{active: selected_label == item.text}" v-for="(item,index) in labels" style="flex: 1;text-align: center;">{{item.text}}</view>
		</view>
		
		<view v-for="(item,index) in data" style="background-color: #fff;padding: 10px;margin: 10px;border-radius: 5px;">
			<view style="border-bottom: 1px solid #eee;padding-bottom: 10px; font-weight: bold;">
				<uni-row style="display: flex;">
				   <uni-col>
				   	订单编号：
				   </uni-col>
				   <uni-col style="margin-left: 150rpx; position: absolute;">
				   	{{item.status_order}}
				   	<!-- 12235688565886 -->
				   </uni-col>
				   <uni-col style="text-align: right;">
				       <view style="color: #007AFF; margin-left: 130rpx;">{{item.status_label}}</view>
				   </uni-col>
				</uni-row>
			</view>
			
			<view style="padding: 10px 0;">
				<uni-row>
				    <uni-col :span="12">
						<view>{{item.title}}</view>
				    </uni-col>
				    <uni-col :span="12">
						<view v-if="item.status == 10" style="text-align: right;">
							<view style="margin-bottom: 10px;font-size: 14px;">定金￥{{item.front_price}}</view>
							<view v-if="item.final_price == 0.00" style="margin-bottom: 10px;font-size: 14px;">费用<text style="color: red;" @click="offerFinalPrice(item)">点击报价</text></view>
							<view v-if="item.final_price != 0.00" style="margin-bottom: 10px;font-size: 14px;">费用￥{{item.final_price}}</view>
							<view style="font-size: 14px; color: red;">合计￥{{item.total_price}}</view>
						</view>
						<view v-if="item.status == 20" style="text-align: right;">
							<!-- <view style="margin-bottom: 10px;font-size: 14px;">定金<text style="color: red;" @click="offerFinalPrice(item)">点击报价</text></view> -->
							<view style="margin-bottom: 10px;font-size: 14px;">定金￥{{item.front_price}}</view>
							<view v-if="item.final_price != 0.00" style="margin-bottom: 10px;font-size: 14px;">费用￥{{item.final_price}}</view>
							<view style="font-size: 14px; color: red;">合计￥{{item.total_price}}</view>
						</view>
				        <view v-if="item.status == 30" style="text-align: right;">
				        	<!-- <view style="margin-bottom: 10px;font-size: 14px;">定金<text style="color: red;" @click="offerFinalPrice(item)">点击报价</text></view> -->
				        	<view style="margin-bottom: 10px;font-size: 14px;">定金￥{{item.front_price}}</view>
				        	<view v-if="item.final_price != 0.00" style="margin-bottom: 10px;font-size: 14px;">费用￥{{item.final_price}}</view>
				        	<view style="font-size: 14px; color: red;">合计￥{{item.total_price}}</view>
				        </view>
				    </uni-col>
				</uni-row>
			</view>
			<view style="border-top: 1px solid #eee;padding-top: 10px;">
				<uni-row>
				    <!-- <uni-col :span="4">
						<image src="../../static/logo.png" style="width: 35px; height: 35px; border-radius: 30px;"></image>
				    </uni-col> -->
					
					<uni-col :span="12" style="font-size: 13px;">
						<view>客户姓名 <text style="margin-left: 10px;">{{item.address.realname}}</text></view>
						<view style="margin: 10px 0; line-height: 1.6; margin-top: 20px;">客户地址 <text style="margin-left: 10px;">{{item.address.region}}{{item.address.address}}</text></view>
					</uni-col>
					
				    <uni-col :span="12">
				        <view style="text-align: right;">
							<button style="background-color: #2979FF; font-size: 8px; border-radius: 5px; color: #FFFFFF; margin-bottom: 5px;" size="mini" @click="call()">立即电话</button>
						</view>
				    </uni-col>
					<uni-col :span="12">
						<view style="text-align: right; margin-bottom: 10px;">
							<button style="background-color: #2979FF; font-size: 8px; border-radius: 5px; color: #FFFFFF;" size="mini" @click="shouadd()">立即导航</button>
						</view>
					</uni-col>				
				</uni-row>
				<!-- <uni-row>
					<view class="block-desc">
					    <!-- 点击图像查看大图 -->
					<!-- </view> -->
					<!-- <view class="block-content">
					    <view class="gallery">
					        <image style="border-radius: 5px;margin: 2px;" v-for="(item,idx) in item.album" :src="item"
					               class="gallery-image"
					               @click="showImage(index, idx)"></image>
					    </view>
					</view> -->
				<!-- </uni-row> -->
				<view v-if="item.status == 10" style="border-top: 1px solid #F0F0F0; text-align: right; padding-top: 10px;">
					<button size="mini" style="color: #FFFFFF; background-color: #007AFF; font-size: 8px;"@click="showmo()">联系客服</button>
					<button size="mini" style="color: #FFFFFF; background-color: red; font-size: 8px; margin-left: 10px;">我已到达</button>
					<!-- <button v-if="item.status == 10" style="margin: 15px 0; font-size: 14px; padding: 3px 0; background-color: #F3A73F; color: #FFFFFF;" @click="offerFinalPrice(item)">点击报价</button> -->
					<!-- <button style="margin: 15px 0; font-size: 14px; padding: 3px 0; background-color: #F3A73F; color: #FFFFFF;" @click="finishService(item)">已完成服务</button> -->
				</view>
				
				<view v-if="item.status == 20" style="border-top: 1px solid #F0F0F0; text-align: right; padding-top: 10px;">
					<button size="mini" style="color: #FFFFFF; background-color: #007AFF; font-size: 8px;"@click="showmo()">联系客服</button>
					<button size="mini" style="color: #FFFFFF; background-color: red; font-size: 8px; margin-left: 10px;"@click="finishService(item)">服务结束</button>
					<!-- <button v-if="item.status == 10" style="margin: 15px 0; font-size: 14px; padding: 3px 0; background-color: #F3A73F; color: #FFFFFF;" @click="offerFinalPrice(item)">点击报价</button> -->
					<!-- <button style="margin: 15px 0; font-size: 14px; padding: 3px 0; background-color: #F3A73F; color: #FFFFFF;" @click="finishService(item)">已完成服务</button> -->
				</view>
				
				<view v-if="item.status == 30" style="border-top: 1px solid #F0F0F0; text-align: right; padding-top: 10px;">
					<button size="mini" style="color: #FFFFFF; background-color: #007AFF; font-size: 8px;"@click="showmo()">联系客服</button>
					
					<!-- <button v-if="item.status == 10" style="margin: 15px 0; font-size: 14px; padding: 3px 0; background-color: #F3A73F; color: #FFFFFF;" @click="offerFinalPrice(item)">点击报价</button> -->
					<!-- <button style="margin: 15px 0; font-size: 14px; padding: 3px 0; background-color: #F3A73F; color: #FFFFFF;" @click="finishService(item)">已完成服务</button> -->
				</view>
			</view>
		</view>
		
		<uni-popup ref="popup" type="center" :animation="false" :mask-click="false" >
			<view style="background-color: #fff;width: 300px;padding: 10px;">
				<text>提示：</text>
				<input step="0.01" v-model="edit_final_price" type="number" style="border: 1px solid #ddd;padding: 5px;margin: 10px 0;" placeholder="请填写价格" />
				<view style="text-align: right;">
					<button type="primary" size="mini" @click="postOfferFinalPrice()">确认</button>
					<button size="mini" style="margin-left: 5px;" @click="cancelOffer()">取消</button>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="popup1" type="center" :animation="false" :mask-click="false" >
			<view style="background-color: #fff;width: 300px;padding: 10px;">
				<view style="text-align: center;padding: 20px; font-weight: bold;">佣金提现</view>
				<input step="0.01" v-model="edit_withdraw_price" type="number" style="border-bottom: 1px solid #ddd;padding: 5px;margin: 10px 0;" placeholder="请填写提现金额" />
				<input v-model="edit_withdraw_card_number" type="number" style="border-bottom: 1px solid #ddd;padding: 5px;margin: 10px 0;" placeholder="请填写银行卡" />
				<input v-model="edit_withdraw_mobile_number" type="number" style="border-bottom: 1px solid #ddd;padding: 5px;margin: 10px 0;" placeholder="请填写预留手机号" />
				<input v-model="edit_withdraw_realname" style="border-bottom: 1px solid #ddd;padding: 5px;margin: 10px 0;" placeholder="请填姓名" />
				<view style="text-align: right;">
					<button type="primary" size="mini" style="background-color: red;" @click="postwithdraw()">确定</button>
					<button size="mini" style="margin-left: 5px;" @click="cancelwithdraw()">取消</button>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labels: [
					{text: '全部订单', status: 0},
					{text: '待上门', status: 10},
					// {text: '待报价', status: 10},
					{text: '待服务', status: 20},
					{text: '已完成', status: 30},
				],
				selected_label: '全部订单',
				data: [],
				data1: [],
				
				balance: 0,
				
				sel_order_id: 0,
				edit_final_price: '',
				
				edit_withdraw_price: '',
				edit_withdraw_card_number: '',
				edit_withdraw_mobile_number: '',
				edit_withdraw_realname: '',
			}
		},
		onLoad() {
		},
		onShow() {
			this.balance = uni.getStorageSync('balance', 0.00);
			this.getWorkerServiceOrder();
		},
		methods: {
			selectLabel(item) {
				this.selected_label = item.text;
				this.data = [];
				
				if (item.status == 0) {
					this.data = this.data1;
					return;
				}
				
				let that = this;
				this.data1.forEach((item1, i) => {
					if (item1.status == item.status) {
						that.data.push(item1)
					}
				})
			},
			withdraw() {
				this.$refs.popup1.open()
			},
			cancelwithdraw() {
				this.$refs.popup1.close()
			},
			postwithdraw() {
				if (this.edit_withdraw_price == '' || this.edit_withdraw_card_number == '' ||this.edit_withdraw_mobile_number == '' || this.edit_withdraw_realname == '' ) {
					return;
				}
				let that = this;
				this.$api.postWithdraw({
					uid: this.$common.getUser(),
					edit_withdraw_price: this.edit_withdraw_price,
					edit_withdraw_card_number: this.edit_withdraw_card_number,
					edit_withdraw_mobile_number: this.edit_withdraw_mobile_number,
					edit_withdraw_realname: this.edit_withdraw_realname,
				}).then(res => {
					if (res.meta.code == '000') {
						window.location.reload()
					}
				})
			},
			getWorkerServiceOrder() {
				let that = this;
				let uid = this.$common.getUser();
				this.$api.getWorkerServiceOrder({
					uid: uid,
				}).then(res => {
					that.data = res.data;
					that.data1 = res.data;
				})
			},
			postOfferFinalPrice() {
				if (this.edit_final_price == '' || this.edit_final_price == 0) {
					return;
				}
				if (this.sel_order_id == 0) {
					return;
				}
				let that = this;
				this.$api.postFinalPriceOffer({
					order_id: this.sel_order_id,
					final_price: this.edit_final_price,
				}).then(res => {
					window.location.reload()
				})
			},
			cancelOffer() {
				this.sel_order_id = 0;
				this.edit_final_price = '';
				this.$refs.popup.close()
			},
			offerFinalPrice(item) {
				this.sel_order_id = item.id;
				this.$refs.popup.open()
			},
			finishService(item) {
				let that = this;
				uni.showModal({
					title: '确认完成订单',
					success: function(res) {
						if (res.confirm) {
							that.$api.postFinishService({
								order_id: item.id,
							}).then(res => {
								window.location.reload()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
			showImage(idx1, idx) {
				let album = [];
				this.data[idx1].album.forEach(function(i, k) {
					album.push(i)
				})
			    uni.previewImage({
			        current: idx, //预览图片的下标
			        urls: album//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
			    })
			},
			showmo() {
				uni.showModal({
					title: '客服热线电话',
					content: '123353325523',
					success: function(res) {
						console.log('立即拨号')
					}
				})
			},
			shouadd(){
				uni.getLocation({
				    // type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				    success: function (res) {
				        const latitude = res.latitude;
				        const longitude = res.longitude;
						// const name = "默认导航";
				        uni.openLocation({
				            latitude: latitude,
				            longitude: longitude,
							// name:name,
				            success: function () {
				                console.log('跳转成功');
				            }
				        });
				    }
				});
			},
		}
	}
</script>

<style lang="less">
	.wallet-add {
		margin: 10px;
	}
	
	uni-page-body, uni-page-refresh {
		height: 100%;
		background-color: #eee;
	}
	.active {
		font-weight: bold;
		color: #007AFF;
	}
	.gallery {
	    --width: calc((100vw - 63px) / 3);
	
	    .gallery-image {
	        width: var(--width);
	        height: var(--width);
	        margin-top: -4px;
	        margin-right: 1px;
	    }
	}
</style>
